<template>
  <div>
    <div v-show="aboutmeshow" class="aboutme">
      <div id="header" class="zfx">
        <div class="info">
          <span class="name">{{name}}</span>
          <span class="team">{{id}}</span>
        </div>
        <div class="sjx">
        </div>
        <div class="head">
          <img class="headImg" src="http://p6li0d1zv.bkt.clouddn.com/duochidian1.jpg" alt="" title="">
        </div>
      </div>
      <div id="content" class="info-form">
        <div class="info-list" v-for="(item,index) in info" :key="index">
          <span class="jx1">{{item.nm}}</span>
          <span class="jx2">{{item.vl}}</span>
        </div>
      </div>
      <div class="btn-save">
        <button @click="closeaboutme()" class="btn-submit" style="width: 200px;height: 35px;">返 回 首 页</button>
      </div>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
  export default {
    data() {
      return {
        aboutmeshow: false,
        name: '多吃点',
        id: '2018.6',
        info: [
          {nm: '程序：', vl: '梁俊   we@jokerliang.cn'},
          {nm: '程序：', vl: '李广儒   lgrknight@163.com'},
          {nm: '程序：', vl: '陈帅    1063974339@qq.com'},
          {nm: '设计：', vl: '王梦姣    1845726172@qq.com'}
        ]
      };
    },
    methods: {
      showaboutme() {
        this.aboutmeshow = true;
      },
      closeaboutme() {
        this.aboutmeshow = false;
      }
    }
  };
</script>

<style lang="stylus" type="text/stylus" rel="stylesheet/stylus">
  .aboutme
    position fixed
    left 0
    top 0
    background #fff
    width 100%
    height 100%
    z-index 20
    .zfx
      position relative
      border none
      width 100%
      height 200px
      margin 0
      padding 0
      border none
      background-color #63B8FF         //#63B8FF
      .info
        position absolute
        left 20px
        top 70px
        color #fff
        .name
          font-size 30px
        .team
          margin-top 10px
          font-size 20px
          color #eee
          display block
      .sjx
        width 0
        height 0
        margin 0
        padding 0
        border-bottom 100px solid #fff
        border-left 600px solid transparent
        position absolute
        right 0
        bottom -2px
      .head
        width 100px
        height 100px
        border-radius 100px
        background-color transparent
        position absolute
        right 10px
        top 60px
        border 3px solid #eee
        .headImg
          width 100%
          height 100%
          border-radius 200px
    .info-form
      margin 20px 20px 20px 30px
      .info-list
        color: #5c5c5c
        border-bottom 1px solid #ccc
        margin-bottom 30px
        clear both
        .jx2
          margin-left 20px
    .btn-save
      text-align center
      margin-top 100px
      .btn-submit
        font-size 16px
        border none
        outline none
        color #fff
        background-color #63B8FF
        border-radius 5px
</style>
